<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar left-text="返回" left-arrow>
      <template #right>
        <input type="text" />
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>

    <keep-alive>
      <!-- 二级路由出口 -->
      <router-view></router-view>
    </keep-alive>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <LookForHousingltem v-for="item in list" :key="item.id" :info="item" />
    </van-list>
  </div>
</template>

<script>
import { Toast } from 'vant'
// import axios from 'axios'
import { LookFor } from '@/api/lookfor'

export default {
  name: 'LookForHousing',
  data () {
    return {
      activeName: 'region',
      list: [],
      loading: false,
      finished: false,
      refreshing: false
    }
  },
  computed: {},
  watch: {},
  methods: {
    onClickLeft () {
      Toast('返回')
    },
    onClickRight () {
      Toast('按钮')
    },
    onLoad () {
      setTimeout()
    },
    onRefresh () {
      // 清空列表数据
      this.finished = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true
      this.onLoad()
    },

    toDetail (id) {
      // 使用编程式导航跳转页面
      this.$router.push({
        name: 'content',
        query: {
          id
        }
      })
    }
  },

  // 在created钩子中发起请求
  async created () {
    const { data } = await LookFor()

    // 让data中的info接收data中的数据
    console.log(data)

    this.info = data
  }
}
</script>
<style scoped></style>
